<template>
  <div>
    <p>
      <el-button type="primary" @click="handleAddItem"
        >添加
      </el-button>
    </p>
    <!-- :default-value="{ name: 'xxxx', age: 18, state: 'view' }" -->
    <EasyTable
      ref="easyTableRef"
      :data="orderList"
      border
      shadow
      :add-method="easyAddMethod"
      :state-method="easyStateMethod"
      :expand-method="expandMethod"
      :add-expand-method="addExpandMethod"
      @expand="handleExpand"
      @expand-submit="handleExpandSubmit"
      @expand-cancel="handleExpandCancel"
      @add="handleAdd"
      @save="handleSave"
      @edit="handleEdit"
      @copy="handleCopy"
      @del="handleDel"
      @add-expand="handleAddExpand"
    >
      <EasyTableColumn type="expand" v-slot="{ row, state }">
        <div
          class="expand"
          style="padding: 0 20px; margin-bottom: 10px"
        >
          <!-- 内部table -->
          <ExtraTable
            border
            shadow
            :expand-id="row.__id__"
            :state="state"
          >
            <ExtraTableColumn prop="orderCode" label="订单编号">
            </ExtraTableColumn>

            <ExtraTableColumn
              prop="priority"
              label="优先级"
              v-slot="{ row }"
            >
              <ElSelect v-model="row.priority" size="small">
                <ElOption
                  v-for="item in extraPriorities"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></ElOption>
              </ElSelect>
            </ExtraTableColumn>

            <ExtraTableColumn
              prop="needs"
              label="需求量"
              v-slot="{ row }"
            >
              <ElInput v-model="row.needs" size="small"></ElInput>
            </ExtraTableColumn>

            <ExtraTableColumn
              prop="standard"
              label="标准"
              v-slot="{ row }"
            >
              <ElSelect v-model="row.standard" size="small">
                <ElOption
                  v-for="item in customers"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></ElOption>
              </ElSelect>
            </ExtraTableColumn>

            <ExtraTableColumn
              prop="mode"
              label="型号"
              v-slot="{ row }"
            >
              <ElSelect v-model="row.mode" size="small">
                <ElOption
                  v-for="item in extraModes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></ElOption>
              </ElSelect>
            </ExtraTableColumn>

            <ExtraTableColumn
              prop="spec"
              label="实际规格"
              v-slot="{ row }"
            >
              <ElSelect v-model="row.spec" size="small">
                <ElOption
                  v-for="item in specs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></ElOption>
              </ElSelect>
            </ExtraTableColumn>

            <ExtraTableColumn
              prop="reel"
              label="线轴"
              v-slot="{ row }"
            >
              <ElSelect v-model="row.reel" size="small">
                <ElOption
                  v-for="item in reels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></ElOption>
              </ElSelect>
            </ExtraTableColumn>

            <ExtraTableColumn
              prop="dish"
              label="组盘方式"
              v-slot="{ row }"
            >
              <ElSelect v-model="row.dish" size="small">
                <ElOption
                  v-for="item in dishs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></ElOption>
              </ElSelect>
            </ExtraTableColumn>

            <ExtraTableColumn
              prop="date"
              label="交付日期"
              width="200px"
            >
            </ExtraTableColumn>

            <ExtraTableColumn
              prop="pack"
              label="包装方式"
              v-slot="{ row }"
            >
              <ElSelect v-model="row.pack" size="small">
                <ElOption
                  v-for="item in packs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></ElOption>
              </ElSelect>
            </ExtraTableColumn>

            <ExtraTableColumn
              prop="mark"
              label="备注"
              v-slot="{ row }"
            >
              <ElInput
                v-model="row.mark"
                size="small"
                v-slot="{ row }"
              ></ElInput>
            </ExtraTableColumn>

            <ExtraTableColumn
              operation
              label="操作"
              width="260px"
            ></ExtraTableColumn>

            <ExtraTableColumn extra v-slot="{ row }">
              <div
                style="
                  display: flex;
                  justify-content: space-evenly;
                  padding: 18px 0 8px 0;
                "
              >
                <div>
                  <ExtraCheckbox v-model="row.send" size="small" />
                  发货计划
                  <ExtraInput
                    v-model="row.sends"
                    size="small"
                    style="width: 100px"
                  />
                  kg 可发货库存：15000kg
                </div>
                <div>
                  <ExtraCheckbox v-model="row.prod" size="small" />
                  生产计划
                  <ExtraInput
                    v-model="row.prods"
                    size="small"
                    style="width: 100px"
                  />kg 最小生产量1000kg
                </div>
              </div>
            </ExtraTableColumn>
          </ExtraTable>
        </div>
      </EasyTableColumn>

      <EasyTableColumn
        prop="customer"
        label="客户名称"
        v-slot="{ row }"
      >
        <ElSelect v-model="row.customer">
          <ElOption
            v-for="item in customers"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></ElOption>
        </ElSelect>
      </EasyTableColumn>

      <EasyTableColumn prop="orderCode" label="订单编号">
      </EasyTableColumn>

      <EasyTableColumn
        prop="productsType"
        label="产品类型"
        v-slot="{ row }"
      >
        <ElSelect v-model="row.productsType">
          <ElOption
            v-for="item in productsTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></ElOption>
        </ElSelect>
      </EasyTableColumn>

      <EasyTableColumn
        prop="orderType"
        label="订单类型"
        v-slot="{ row }"
      >
        <ElSelect v-model="row.orderType">
          <ElOption
            v-for="item in orderTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></ElOption>
        </ElSelect>
      </EasyTableColumn>

      <EasyTableColumn prop="total" label="订单数量">
      </EasyTableColumn>

      <EasyTableColumn prop="weight" label="订单重量">
      </EasyTableColumn>

      <EasyTableColumn prop="created" label="创建时间">
      </EasyTableColumn>

      <EasyTableColumn prop="seller" label="销售员" v-slot="{ row }">
        <ElSelect v-model="row.seller">
          <ElOption
            v-for="item in sellers"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></ElOption>
        </ElSelect>
      </EasyTableColumn>

      <EasyTableColumn prop="state" label="状态"> </EasyTableColumn>

      <EasyTableColumn
        operation
        :buttons="['add', 'del', 'addExpand']"
        label="功能"
        :addExpand="{ label: '添加订单' }"
        width="240"
      >
        <el-button type="primary" size="small">审批</el-button>
      </EasyTableColumn>
    </EasyTable>

    <!-- orderList: {{ orderList }} -->
  </div>
</template>

<script setup lang="ts">
import { ElInput, ElSelect, ElOption } from 'element-plus';
import {
  EasyTable,
  EasyTableColumn,
  type Save,
  type Expand,
  type ExpandSubmit,
  type AddExpand,
  type ExpandMethod,
  type AddExpandMethod,
} from '@/components/easy-table';
import {
  ExtraTable,
  ExtraTableColumn,
  ExtraInput,
  ExtraCheckbox,
  ExtraSelect,
  ExtraDatePicker,
} from '@/components/extra-table';
import { nextTick, ref } from 'vue';

import {
  getEasyTableDataWithChildren,
  getEasyTableDataOnly,
  saveEasyTableData,
  saveEasyTableDataWithId,
  getExtraTableDataWithParentId,
  saveExtraTableData,
  saveExtraTableDataWithId,
  then,
} from './TestViewApi';

const customers = [
  { label: '芜湖美芝', value: '芜湖美芝' },
  { label: '聚芯制造', value: '聚芯制造' },
];

const productsTypes = [
  { label: '成品', value: '成品' },
  { label: '半成品', value: '半成品' },
];

const orderTypes = [
  { label: '销售订单', value: '销售订单' },
  { label: '样品订单', value: '样品订单' },
];

const sellers = [
  { label: '王某某', value: '王某某' },
  { label: '李某某', value: '李某某' },
];

const orderList = ref();
// [
//   {
//     index: 1,
//     customer: '芜湖美芝',
//     orderCode: 'd9827349827',
//     productsType: '成品',
//     orderType: '销售订单',
//     total: 0,
//     weight: 0,
//     created: new Date().toLocaleDateString(),
//     seller: '某偶某',
//     state: '审核中',
//   },
//   {
//     index: 1,
//     customer: '芜湖美芝',
//     orderCode: 'd9827349827',
//     productsType: '成品',
//     orderType: '销售订单',
//     total: 0,
//     weight: 0,
//     created: new Date().toLocaleDateString(),
//     seller: '某偶某',
//     state: '未审核',
//   },
// ]

const extraPriorities = [
  { label: 100, value: 100 },
  { label: 50, value: 50 },
  { label: 0, value: 0 },
];

const extraModes = [
  { label: 'xyz123', value: 'xyz123' },
  { label: 'abc321', value: 'abc321' },
];

const specs = [
  { label: '0.58', value: '0.58' },
  { label: '0.02', value: '0.02' },
  { label: '0.025', value: '0.025' },
];
const reels = [
  { label: 'idk12', value: 'idk12' },
  { label: 'pt200', value: 'pt200' },
];
const dishs = [
  { label: '2*2', value: '2*2' },
  { label: '4*4', value: '4*4' },
];
const packs = [
  { label: '木托', value: '木托' },
  { label: '纸箱', value: '纸箱' },
];

const extraList = [
  {
    index: 1,
    orderCode: 123,
    priority: 100,
    needs: 5000,
    standard: '美芝',
    mode: 'abc/13',
    spec: '0.025',
    reel: 'idk12',
    dish: '2*2',
    date: new Date().toLocaleDateString(),
    pack: '木托',
    mark: '',
  },
];

const easyStateMethod = (value: string) => {
  if (value === '审核中') return 'solid';
  return 'view';
};

const fakeReq1 = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          index: 1,
          orderCode: 111,
          priority: 100,
          needs: 5000,
          standard: '美芝',
          mode: 'abc/13',
          spec: '0.025',
          reel: 'idk12',
          dish: '2*2',
          date: new Date().toLocaleDateString(),
          pack: '木托',
          mark: '',
        },
      ]);
    }, 1000);
  });
};
const fakeReq2 = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        index: 1,
        orderCode: 222,
        priority: 100,
        needs: 5000,
        standard: '美芝',
        mode: 'abc/13',
        spec: '0.025',
        reel: 'idk12',
        dish: '2*2',
        date: new Date().toLocaleDateString(),
        pack: '木托',
        mark: '',
      });
    }, 500);
  });
};

const handleExpand: Expand = (_, context) => {
  console.log('expand');
};
const handleAdd = () => {
  console.log('handleAdd');
};

const handleEdit = () => {
  console.log('handleEdit');
};
const handleCopy = () => {
  console.log('handleCopy');
};
const handleDel = () => {
  console.log('handleDel');
};

const handleExpandCancel: ExpandSubmit = (data, context) => {
  console.log('handleExpandCancel', data, context?.getData());
};
const handleAddExpand: AddExpand = (data, expand) => {
  expand?.add({
    index: 1,
    orderCode: 123,
    priority: 100,
    needs: 5000,
    standard: '美芝',
    mode: 'abc/13',
    spec: '0.025',
    reel: 'idk12',
    dish: '2*2',
    date: new Date().toLocaleDateString(),
    pack: '木托',
    mark: '',
  });
};

async function test1() {
  const data = await getEasyTableDataOnly();
  console.log('🚀 ~ test1 ~ data:', data);
  orderList.value = data;
}

// 1. 获取easy-table数据
test1();
// 2. 获取extra-table数据-展开行
const expandMethod: ExpandMethod = async ({ row }, context) => {
  console.log('🚀 ~ expandMethod:');
  const id = row.orderCode;
  console.log('🚀 ~ constexpandMethod:ExpandMethod= ~ id:', id);
  const data = (await getExtraTableDataWithParentId(id)) as any[];
  context?.setData(data);
};
// 3. 新增一条easy-table数据
// 获取新的数据
const easyAddMethod = async () => {
  console.log('添加数据');
  const data = await then({
    index: 1,
    customer: '芜湖美芝',
    orderCode: 'd9827349827',
    productsType: '成品',
    orderType: '销售订单',
    total: 0,
    weight: 0,
    created: new Date().toLocaleDateString(),
    seller: '某偶某',
    state: '未审核',
  });

  return data;
};
const easyTableRef = ref();
// 出发add方法
const handleAddItem = () => {
  easyTableRef.value.add();
};
// 4. 保存一条easy-table数据
const handleSave: Save = ({ row }) => {
  console.log('Save', row);
};
// 5. 新增一条extra-table数据
const addExpandMethod: AddExpandMethod = async (_, context) => {
  console.log('🚀 ~ addExpandMethod:');
  const item = await then({
    index: 1,
    orderCode: 222,
    priority: 100,
    needs: 5000,
    standard: '美芝',
    mode: 'abc/13',
    spec: '0.025',
    reel: 'idk12',
    dish: '2*2',
    date: new Date().toLocaleDateString(),
    pack: '木托',
    mark: '',
  });
  context?.add(item);
};
// 6. 保存extra-table数据
const handleExpandSubmit: ExpandSubmit = (data, extra) => {
  console.log('handleExpandSubmit', data, extra?.getData());
};
</script>

<style scoped></style>
